import Imagelocation from '@/components/Imagelocation';
import { View,Text } from '@tarojs/components';
import classNames from 'classnames';
import React from 'react';
import styles from './index.module.scss';

const OrgView = ({
  orgInfo: { orgName, disabled, productCarConfirmInfoList } = {},
  className = '',
}) => {
  if (!productCarConfirmInfoList?.length) {
    return null;
  }

  return (
    <View className={`${styles.OrgView} ${className}`}>
      <View className="org-name omit">{disabled ? '失效商品' : orgName}</View>

      <View className="product-list">
        {productCarConfirmInfoList?.map(
          ({
            productVariantReleaseId,
            imageUrl,
            productReleaseName,
            options,
            singlePrice,
            num,
          }) => {
            let specStr;

            if (disabled) {
              specStr = '超出配送范围';
            } else {
              const specOptions = JSON.parse(options);
              specStr = Object.values(specOptions).join(',') || '';
            }

            return (
              <View className="product-item" key={productVariantReleaseId}>
                <Imagelocation className="product-img" src={imageUrl} />

                <View className="product-info">
                  <View className="product-title omit-1">{productReleaseName}</View>

                  <View className={classNames('option omit-1', { disabled })}>{specStr}</View>

                  <Text className="product-span customePageStyle customePageStyleBg20">支持7天无理由退货</Text>

                  <View className="line">
                    <View className="product-price">
                      <View className="unit">¥</View>
                      <View className="value">{singlePrice}</View>
                    </View>

                    <View className="buy-num">x{num}</View>
                  </View>
                </View>
              </View>
            );
          },
        )}
      </View>
    </View>
  );
};

export default OrgView;
